<template>
    <!-- 我的课程 -->
    <div class="myCourse">
      <div class="person" v-for="item in list" :key="item.id" @click="gotoclicle(item)">
        <div class="person-center">
            <img class="person-img" :src="item.thumb" alt="">
            <div class="person-data">
                <span>{{item.title}}</span>
                <span>{{item.member_num}} 粉丝</span>
            </div>
        </div>
      </div>
    </div>
  </template>
  <script>
import { ourquanzi } from "@/api/community";
import { time } from "@/config/time";
  export default {
    data() {
      return {
       list:[]
      };
    },
    mounted() {
      this.sublist()
    },
    methods: {
      sublist(){
        let np={
          mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 3,
        }
        ourquanzi(np).then(res=>{
          console.log(res,'我的sub');
          if(res.code==1){
            this.list=res.circledata

          }
        })
      },
        gotoclicle(item){
          this.$store.commit("SET_PERLEFTMENUSHOW", false);
            this.$router.push({
            path: "/circle",
            query: {
                 id: item.id,
            },
            });
            // window.open(routeData.href, '_blank');
        }
    },
  };
  </script>

  <style lang="scss" scoped>
  .myCourse {
    width: calc(1650 / 1920 * 100vw);
    background: #fff;
    position: absolute;
    top: calc(288 / 1920 * 100vw);
    left: calc(240 / 1920 * 100vw);
    padding: calc(30 / 1920 * 100vw) calc(40 / 1920 * 100vw) calc(40 / 1920 * 100vw);
   .person{
    width: 100%;
    height: 60px;
    // border: 1px solid red;
    padding: 0 10px;
    // padding-bottom: 10px;
    margin-bottom: 10px;
    .person-center{
        width: 100%;
        height: 100%;
        // border: 1px solid blue;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        display: flex;
        align-items: center;

        .person-img{
            width: 48px;
            height: 48px;
            border-radius: 10px;
            margin-right: 6px;
        }
        .person-data{
            // background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            span{
                width: 100%;
            }
        }
    }
   }
  }
  </style>
